import { k as resolveComponent, u as openBlock, v as createElementBlock, w as createBaseVNode, l as createVNode, z as createCommentVNode, H as withCtx, A as normalizeClass, D as renderSlot, E as toDisplayString, G as normalizeStyle, M as Fragment, N as renderList, P as withModifiers, y as createBlock, B as resolveDynamicComponent, d as defineComponent$1, a0 as useI18n, r as ref, a8 as reactive, j as onMounted, W as unref, J as createTextVNode } from "./vue.js";
import { aD as isNull, d as defineComponent, $ as $prefix, au as Checkbox, ao as Radio, j as props, f as setup, l as $props, m as $setup, g as axios, T as TINYModal, I as Input, B as Button, aE as Popconfirm, _ as _export_sfc$2 } from "./index.js";
import { D as Dropdown, n as DropdownMenu, o as DropdownItem, I as index$2, G as Grid, C as Column } from "./index17.js";
import { R as Row, C as Col } from "./index16.js";
import { D as DialogBox } from "./index19.js";
import { a as Form, F as FormItem } from "./index14.js";
import { S as Select, O as Option } from "./index18.js";
import "./index15.js";
const handelIconClick = ({ emit }) => (item, index2, event) => {
  if (item.disabled)
    return;
  emit("icon-click", item, index2, event);
};
const getSliceNum = ({ state }) => () => {
  const sliceNumMap = {
    "mini": 1,
    "small": 2,
    "medium": 3,
    "large": 5
  };
  return sliceNumMap[state.size];
};
const getIconNum = ({ state }) => () => {
  const iconNumMap = {
    "mini": 2,
    "small": 3,
    "medium": 4,
    "large": 6
  };
  return iconNumMap[state.size];
};
const handleChange = ({ constants, dispatch, emit, state, nextTick }) => () => {
  nextTick(() => {
    emit("change", state.model);
    state.isGroup && dispatch(constants.CARD_GROUP, "handleChange", [state.model]);
  });
};
const isGroup = ({ constants, parent: $parent, state }) => () => {
  let parent = $parent;
  while (parent) {
    if (parent.$options.componentName !== constants.CARD_GROUP) {
      parent = parent.$parent;
    } else {
      state.cardGroup = parent;
      return true;
    }
  }
  return false;
};
const getSize = ({ props: props2, state }) => () => state.isGroup ? state.cardGroup.size || props2.size : props2.size;
const isDisabled = ({ props: props2, state }) => () => props2.disabled || state.cardGroup.disabled;
const getModel = ({ props: props2, state }) => () => {
  const model = state.isGroup ? state.store : props2.modelValue !== void 0 ? props2.modelValue : state.selfModel;
  if (state.isCheckbox) {
    return isNull(model) ? [] : model;
  } else {
    return state.store;
  }
};
const setModel = ({ constants, dispatch, emit, state }) => (val) => {
  if (state.isGroup) {
    dispatch(constants.CARD_GROUP, "update:modelValue", [val]);
  } else {
    emit("update:modelValue", val);
    state.isCheckbox && (state.selfModel = val);
  }
};
const computedStore = ({ state, props: props2 }) => () => state.isGroup ? state.cardGroup.modelValue : props2.modelValue;
const getItemChecked = ({ props: props2, state }) => () => {
  if (!state.checkType)
    return;
  if (state.isCheckbox) {
    return state.isGroup || Array.isArray(state.model) ? ~state.model.indexOf(props2.label) : state.model;
  } else {
    return state.model === props2.label;
  }
};
const api = ["state", "handelIconClick", "handleChange"];
const renderless = (props2, { reactive: reactive2, watch, computed }, { vm, parent, emit, constants, nextTick, dispatch }) => {
  const api2 = {};
  const state = reactive2({
    cardGroup: {},
    selfModel: false,
    itemChecked: computed(() => api2.getItemChecked()),
    sliceNum: computed(() => api2.getSliceNum()),
    iconNum: computed(() => api2.getIconNum()),
    effectOptions: computed(() => props2.options.filter((item) => !item.hidden)),
    store: computed(() => api2.computedStore()),
    customClass: computed(() => props2.customClass || state.cardGroup.customClass || ""),
    autoWidth: computed(() => props2.autoWidth || state.cardGroup.autoWidth),
    height: computed(() => props2.height || state.cardGroup.height),
    status: computed(() => props2.status || state.cardGroup.status || "default"),
    checkType: computed(() => props2.checkType || state.cardGroup.checkType),
    type: computed(() => props2.type || state.cardGroup.type || "text"),
    isCheckbox: computed(() => state.checkType === "checkbox"),
    isGroup: computed(() => api2.isGroup()),
    size: computed(() => api2.getSize()),
    disabled: computed(() => api2.isDisabled()),
    model: computed({
      get: () => api2.getModel(),
      set: (val) => api2.setModel(val)
    })
  });
  Object.assign(api2, {
    state,
    getSize: getSize({ props: props2, state }),
    getModel: getModel({ props: props2, state }),
    isGroup: isGroup({ constants, parent, state }),
    isDisabled: isDisabled({ props: props2, state }),
    setModel: setModel({ constants, dispatch, emit, props: props2, vm, state }),
    handleChange: handleChange({ constants, dispatch, emit, state, nextTick }),
    getSliceNum: getSliceNum({ state, props: props2 }),
    getIconNum: getIconNum({ state, props: props2 }),
    computedStore: computedStore({ state, props: props2 }),
    handelIconClick: handelIconClick({ emit }),
    getItemChecked: getItemChecked({ state, props: props2 })
  });
  watch(
    () => state.disabled,
    () => {
      state.effectOptions.forEach((item) => {
        item.disabled = item.disabled || state.disabled;
      });
    },
    { immediate: true }
  );
  return api2;
};
const index$1 = "";
var classes$1 = {
  "card": "overflow-hidden bg-color-bg-1 border hover:shadow",
  "size-large": "rounded-lg min-w-[theme(spacing.112)]",
  "size-medium": "rounded-lg min-w-[theme(spacing.72)]",
  "size-small": "rounded-lg min-w-[theme(spacing.54)]",
  "size-mini": "rounded min-w-[theme(spacing.32)]",
  "size-large-padding": "p-4",
  "size-medium-padding": "p-3",
  "size-small-padding": "p-3",
  "size-mini-padding": "p-2",
  "size-large-width": "w-144",
  "size-medium-width": "w-96",
  "size-small-width": "w-72",
  "size-mini-width": "w-44",
  "status-success": "border-color-success",
  "status-warning": "border-color-warning",
  "status-alerting": "border-color-alert",
  "status-danger": "border-color-error",
  "status-default": "border-color-border-separator",
  "title": "text-base sm:text-sm mb-3 leading-5.5 text-color-text-primary mr-2",
  "checkbox": "relative left-1 pt-3 sm:pt-3.5 pl-2 [&_[data-tag=tiny-checkbox]]:p-0 [&_[data-tag=tiny-checkbox]>span>span]:p-0 [&_[data-tag=tiny-checkbox]>span:nth-child(2)]:hidden",
  "radio": "relative left-0 sm:left-3 pt-0 sm:pt-3 [&_[role=radio]_span_span]:pr-0",
  "logo": "flex mb-3 py-2 w-full justify-center items-center aspect-[5_/_2] overflow-hidden",
  "main": "text-sm sm:text-xs text-color-text-secondary overflow-y-auto",
  "footer": "p-3 border-t border-t-color-border-separator",
  "options": "w-full px-3 h-11 flex items-center justify-around text-color-text-primary border-t border-t-color-border-separator"
};
function _createForOfIteratorHelperLoose$1(o, allowArrayLike) {
  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
  if (it)
    return (it = it.call(o)).next.bind(it);
  if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") {
    if (it)
      o = it;
    var i = 0;
    return function() {
      if (i >= o.length)
        return { done: true };
      return { done: false, value: o[i++] };
    };
  }
  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray$1(o, minLen) {
  if (!o)
    return;
  if (typeof o === "string")
    return _arrayLikeToArray$1(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor)
    n = o.constructor.name;
  if (n === "Map" || n === "Set")
    return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
    return _arrayLikeToArray$1(o, minLen);
}
function _arrayLikeToArray$1(arr, len) {
  if (len == null || len > arr.length)
    len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++)
    arr2[i] = arr[i];
  return arr2;
}
var _export_sfc$1 = function _export_sfc2(sfc, props2) {
  var target = sfc.__vccOpts || sfc;
  for (var _iterator = _createForOfIteratorHelperLoose$1(props2), _step; !(_step = _iterator()).done; ) {
    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
    target[key] = val;
  }
  return target;
};
var _sfc_main$2 = defineComponent({
  name: $prefix + "Card",
  emits: ["icon-click", "update:modelValue", "change", "click"],
  components: {
    TinyDropdown: Dropdown,
    TinyDropdownMenu: DropdownMenu,
    TinyDropdownItem: DropdownItem,
    TinyCheckbox: Checkbox,
    TinyRadio: Radio,
    IconEllipsis: index$2()
  },
  props: [].concat(props, ["_constants", "modelValue", "src", "title", "customClass", "height", "label", "autoWidth", "options", "iconMore", "size", "status", "checkType", "type", "disabled"]),
  setup: function setup$1(props2, context) {
    return setup({
      props: props2,
      context,
      renderless,
      api,
      classes: classes$1
    });
  }
});
var _hoisted_1$2 = {
  key: 0,
  class: "tiny-card--checkbox"
};
var _hoisted_2$2 = {
  key: 1,
  class: "tiny-card--radio"
};
var _hoisted_3$1 = /* @__PURE__ */ createBaseVNode(
  "span",
  null,
  null,
  -1
  /* HOISTED */
);
var _hoisted_4$1 = {
  key: 2,
  class: "tiny-card--image"
};
var _hoisted_5$1 = ["src"];
var _hoisted_6$1 = {
  key: 3,
  class: "tiny-card--video"
};
var _hoisted_7$1 = ["src"];
var _hoisted_8$1 = {
  key: 0,
  class: "tiny-card--logo__head"
};
var _hoisted_9$1 = ["src"];
var _hoisted_10$1 = {
  class: "tiny-card--logo__title--p"
};
var _hoisted_11$1 = {
  key: 0,
  class: "tiny-card__footer"
};
var _hoisted_12$1 = {
  key: 0,
  class: "tiny-card__footer-footer"
};
var _hoisted_13$1 = {
  key: 1,
  class: "tiny-card__footer-options"
};
var _hoisted_14 = ["onClick"];
var _hoisted_15 = {
  key: 0,
  class: "tiny-card__footer-options-span"
};
var _hoisted_16 = {
  key: 0,
  class: "tiny-card__footer-options-span"
};
var _hoisted_17 = {
  key: 0,
  class: "tiny-card__footer-more"
};
var _hoisted_18 = ["onClick"];
var _hoisted_19 = {
  key: 0
};
function _sfc_render$1(_ctx, _cache, $props2, $setup2, $data, $options) {
  var _component_tiny_checkbox = resolveComponent("tiny-checkbox");
  var _component_tiny_radio = resolveComponent("tiny-radio");
  var _component_tiny_dropdown_item = resolveComponent("tiny-dropdown-item");
  var _component_tiny_dropdown_menu = resolveComponent("tiny-dropdown-menu");
  var _component_tiny_dropdown = resolveComponent("tiny-dropdown");
  return openBlock(), createElementBlock(
    "div",
    {
      class: normalizeClass(["tiny-card", ["tiny-card--" + _ctx.state.size, "tiny-card--" + _ctx.state.status, _ctx.state.autoWidth ? "" : "tiny-card--" + _ctx.state.size + "-width", _ctx.state.itemChecked ? "tiny-card--item-checked" : "", _ctx.state.disabled ? "tiny-card--disabled" : "", _ctx.state.customClass]]),
      onClick: _cache[3] || (_cache[3] = function($event) {
        return _ctx.$emit("click", $event);
      })
    },
    [createBaseVNode(
      "div",
      {
        class: "tiny-card__body",
        style: normalizeStyle({
          "display": _ctx.state.type === "text" ? "flex" : "block"
        })
      },
      [_ctx.state.checkType === "checkbox" && _ctx.state.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$2, [createVNode(_component_tiny_checkbox, {
        modelValue: _ctx.state.model,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
          return _ctx.state.model = $event;
        }),
        label: _ctx.label,
        text: "",
        disabled: _ctx.state.disabled,
        onChange: _ctx.handleChange
      }, null, 8, ["modelValue", "label", "disabled", "onChange"])])) : createCommentVNode("v-if", true), _ctx.state.checkType === "radio" && _ctx.state.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_2$2, [createVNode(_component_tiny_radio, {
        modelValue: _ctx.state.model,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
          return _ctx.state.model = $event;
        }),
        label: _ctx.label,
        disabled: _ctx.state.disabled,
        onChange: _ctx.handleChange
      }, {
        default: withCtx(function() {
          return [_hoisted_3$1];
        }),
        _: 1
        /* STABLE */
      }, 8, ["modelValue", "label", "disabled", "onChange"])])) : createCommentVNode("v-if", true), _ctx.state.type === "image" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [createBaseVNode("img", {
        src: _ctx.src
      }, null, 8, _hoisted_5$1)])) : createCommentVNode("v-if", true), _ctx.state.type === "video" ? (openBlock(), createElementBlock("div", _hoisted_6$1, [createBaseVNode("video", {
        src: _ctx.src,
        controls: ""
      }, null, 8, _hoisted_7$1)])) : createCommentVNode("v-if", true), createBaseVNode(
        "div",
        {
          class: normalizeClass(["tiny-card--logo", "tiny-card--" + _ctx.state.size + "-padding"])
        },
        [_ctx.state.type === "logo" ? (openBlock(), createElementBlock("div", _hoisted_8$1, [createBaseVNode("img", {
          src: _ctx.src
        }, null, 8, _hoisted_9$1)])) : createCommentVNode("v-if", true), _ctx.title || _ctx.slots.title ? (openBlock(), createElementBlock(
          "div",
          {
            key: 1,
            class: normalizeClass(["tiny-card--logo__title", _ctx.state.type === "logo" ? "tiny-card--logo__title--type-logo" : ""])
          },
          [renderSlot(_ctx.$slots, "title-left"), renderSlot(_ctx.$slots, "title", {}, function() {
            return [createBaseVNode(
              "p",
              _hoisted_10$1,
              toDisplayString(_ctx.title),
              1
              /* TEXT */
            )];
          }), renderSlot(_ctx.$slots, "title-right")],
          2
          /* CLASS */
        )) : createCommentVNode("v-if", true), createBaseVNode(
          "div",
          {
            class: normalizeClass(["tiny-card--logo__main", _ctx.state.type === "logo" ? "tiny-card--logo__main-type-logo" : ""]),
            style: normalizeStyle({
              height: _ctx.state.height
            })
          },
          [renderSlot(_ctx.$slots, "default")],
          6
          /* CLASS, STYLE */
        )],
        2
        /* CLASS */
      )],
      4
      /* STYLE */
    ), _ctx.state.effectOptions.length || _ctx.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_11$1, [_ctx.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_12$1, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("v-if", true), _ctx.state.effectOptions.length ? (openBlock(), createElementBlock("div", _hoisted_13$1, [(openBlock(true), createElementBlock(
      Fragment,
      null,
      renderList(_ctx.state.effectOptions.slice(0, _ctx.state.sliceNum), function(item, index2) {
        return openBlock(), createElementBlock("div", {
          class: normalizeClass(["tiny-card__footer-options-div", item.disabled ? "tiny-card__footer-options-disabled" : ""]),
          key: item.text + index2,
          onClick: withModifiers(function($event) {
            return _ctx.handelIconClick(item, index2, $event);
          }, ["stop"])
        }, [(openBlock(), createBlock(resolveDynamicComponent(item.icon), {
          class: normalizeClass(["tiny-card__footer-options-icon", item.disabled ? "tiny-card__footer-options-icon-disabled" : ""])
        }, null, 8, ["class"])), item.text ? (openBlock(), createElementBlock(
          "span",
          _hoisted_15,
          toDisplayString(item.text),
          1
          /* TEXT */
        )) : createCommentVNode("v-if", true)], 10, _hoisted_14);
      }),
      128
      /* KEYED_FRAGMENT */
    )), _ctx.state.effectOptions.length === _ctx.state.iconNum ? (openBlock(), createElementBlock(
      "div",
      {
        key: 0,
        class: normalizeClass(["tiny-card__footer-options-div", _ctx.state.effectOptions[_ctx.state.sliceNum].disabled ? "tiny-card__footer-options-disabled" : ""]),
        onClick: _cache[2] || (_cache[2] = withModifiers(function($event) {
          return _ctx.handelIconClick(_ctx.state.effectOptions[_ctx.state.sliceNum], _ctx.state.sliceNum, $event);
        }, ["stop"]))
      },
      [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.effectOptions[_ctx.state.sliceNum].icon), {
        class: normalizeClass(["tiny-card__footer-options-icon", _ctx.state.effectOptions[_ctx.state.sliceNum].disabled ? "tiny-card__footer-options-icon-disabled" : ""])
      }, null, 8, ["class"])), _ctx.state.effectOptions[_ctx.state.sliceNum].text ? (openBlock(), createElementBlock(
        "span",
        _hoisted_16,
        toDisplayString(_ctx.state.effectOptions[_ctx.state.sliceNum].text),
        1
        /* TEXT */
      )) : createCommentVNode("v-if", true)],
      2
      /* CLASS */
    )) : createCommentVNode("v-if", true), _ctx.state.effectOptions.length > _ctx.state.iconNum ? (openBlock(), createBlock(_component_tiny_dropdown, {
      key: 1,
      class: "tiny-card__footer-options-dropdown",
      "show-self-icon": ""
    }, {
      dropdown: withCtx(function() {
        return [createVNode(_component_tiny_dropdown_menu, {
          placement: "bottom"
        }, {
          default: withCtx(function() {
            return [(openBlock(true), createElementBlock(
              Fragment,
              null,
              renderList(_ctx.state.effectOptions.slice(_ctx.state.sliceNum), function(item, index2) {
                return openBlock(), createBlock(
                  _component_tiny_dropdown_item,
                  {
                    key: item.text + index2
                  },
                  {
                    default: withCtx(function() {
                      return [createBaseVNode("div", {
                        onClick: withModifiers(function($event) {
                          return _ctx.handelIconClick(item, index2 + _ctx.state.sliceNum, $event);
                        }, ["stop"]),
                        class: normalizeClass(["", ["tiny-card__footer-dropdown-item", item.disabled ? "tiny-card__footer-dropdown-item-disabled" : ""]])
                      }, [(openBlock(), createBlock(resolveDynamicComponent(item.icon), {
                        class: normalizeClass(["tiny-card__footer-options-icon", item.disabled ? "tiny-card__footer-options-icon-disabled" : ""])
                      }, null, 8, ["class"])), item.text ? (openBlock(), createElementBlock(
                        "span",
                        _hoisted_19,
                        toDisplayString(item.text),
                        1
                        /* TEXT */
                      )) : createCommentVNode("v-if", true)], 10, _hoisted_18)];
                    }),
                    _: 2
                    /* DYNAMIC */
                  },
                  1024
                  /* DYNAMIC_SLOTS */
                );
              }),
              128
              /* KEYED_FRAGMENT */
            ))];
          }),
          _: 1
          /* STABLE */
        })];
      }),
      default: withCtx(function() {
        return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconMore), {
          class: "tiny-card__footer-options-icon"
        })), _ctx.state.effectOptions[0].text ? (openBlock(), createElementBlock(
          "span",
          _hoisted_17,
          toDisplayString(_ctx.t("ui.base.more")),
          1
          /* TEXT */
        )) : createCommentVNode("v-if", true)];
      }),
      _: 1
      /* STABLE */
    })) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)],
    2
    /* CLASS */
  );
}
var pc = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["render", _sfc_render$1]]);
var classes = {
  "card": "overflow-hidden bg-color-bg-1 border hover:shadow",
  "size-large": "rounded-lg min-w-[theme(spacing.112)]",
  "size-medium": "rounded-lg min-w-[theme(spacing.72)]",
  "size-small": "rounded-lg min-w-[theme(spacing.54)]",
  "size-mini": "rounded min-w-[theme(spacing.32)]",
  "size-large-padding": "p-4",
  "size-medium-padding": "p-3",
  "size-small-padding": "p-3",
  "size-mini-padding": "p-2",
  "size-large-width": "w-144",
  "size-medium-width": "w-96",
  "size-small-width": "w-72",
  "size-mini-width": "w-44",
  "status-success": "border-color-success",
  "status-warning": "border-color-warning",
  "status-alerting": "border-color-alert",
  "status-danger": "border-color-error",
  "status-default": "border-color-border-separator",
  "title": "text-base sm:text-sm mb-3 leading-5.5 text-color-text-primary mr-2",
  "checkbox": "relative left-1 pt-3 sm:pt-3.5 pl-2 [&_[data-tag=tiny-checkbox]]:p-0 [&_[data-tag=tiny-checkbox]>span>span]:p-0 [&_[data-tag=tiny-checkbox]>span:nth-child(2)]:hidden",
  "radio": "relative left-0 sm:left-3 pt-0 sm:pt-3 [&_[role=radio]_span_span]:pr-0",
  "logo": "flex mb-3 py-2 w-full justify-center items-center aspect-[5_/_2] overflow-hidden",
  "main": "text-sm sm:text-xs text-color-text-secondary overflow-y-auto",
  "footer": "p-3 border-t border-t-color-border-separator",
  "options": "w-full px-3 h-11 flex items-center justify-around text-color-text-primary border-t border-t-color-border-separator"
};
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
  if (it)
    return (it = it.call(o)).next.bind(it);
  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
    if (it)
      o = it;
    var i = 0;
    return function() {
      if (i >= o.length)
        return { done: true };
      return { done: false, value: o[i++] };
    };
  }
  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(o, minLen) {
  if (!o)
    return;
  if (typeof o === "string")
    return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor)
    n = o.constructor.name;
  if (n === "Map" || n === "Set")
    return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
    return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length)
    len = arr.length;
  for (var i = 0, arr2 = new Array(len); i < len; i++)
    arr2[i] = arr[i];
  return arr2;
}
var _export_sfc = function _export_sfc22(sfc, props2) {
  var target = sfc.__vccOpts || sfc;
  for (var _iterator = _createForOfIteratorHelperLoose(props2), _step; !(_step = _iterator()).done; ) {
    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
    target[key] = val;
  }
  return target;
};
var _sfc_main$1 = defineComponent({
  name: $prefix + "Card",
  emits: ["icon-click", "update:modelValue", "change", "click"],
  components: {
    TinyDropdown: Dropdown,
    TinyDropdownMenu: DropdownMenu,
    TinyDropdownItem: DropdownItem,
    TinyCheckbox: Checkbox,
    TinyRadio: Radio,
    IconEllipsis: index$2()
  },
  props: [].concat(props, ["_constants", "modelValue", "src", "title", "customClass", "height", "label", "autoWidth", "options", "iconMore", "size", "status", "checkType", "type", "disabled"]),
  setup: function setup$12(props2, context) {
    return setup({
      props: props2,
      context,
      renderless,
      api,
      classes
    });
  }
});
var _hoisted_1$1 = /* @__PURE__ */ createBaseVNode(
  "span",
  null,
  null,
  -1
  /* HOISTED */
);
var _hoisted_2$1 = {
  key: 2,
  "data-tag": "tiny-card-image"
};
var _hoisted_3 = ["src"];
var _hoisted_4 = {
  key: 3,
  "data-tag": "tiny-card-vadio"
};
var _hoisted_5 = ["src"];
var _hoisted_6 = ["src"];
var _hoisted_7 = {
  key: 0,
  "data-tag": "tiny-card-footer",
  class: "w-full"
};
var _hoisted_8 = ["onClick"];
var _hoisted_9 = {
  key: 0,
  class: "ml-1 align-middle"
};
var _hoisted_10 = {
  key: 0,
  class: "ml-1 align-middle"
};
var _hoisted_11 = {
  key: 0,
  class: "ml-1 text-color-text-primary"
};
var _hoisted_12 = ["onClick"];
var _hoisted_13 = {
  key: 0
};
function _sfc_render(_ctx, _cache, $props2, $setup2, $data, $options) {
  var _component_tiny_checkbox = resolveComponent("tiny-checkbox");
  var _component_tiny_radio = resolveComponent("tiny-radio");
  var _component_tiny_dropdown_item = resolveComponent("tiny-dropdown-item");
  var _component_tiny_dropdown_menu = resolveComponent("tiny-dropdown-menu");
  var _component_tiny_dropdown = resolveComponent("tiny-dropdown");
  return openBlock(), createElementBlock(
    "div",
    {
      "data-tag": "tiny-card",
      class: normalizeClass(_ctx.m(_ctx.gcls("card"), _ctx.gcls("size-" + _ctx.state.size), _ctx.gcls("status-" + _ctx.state.status), _ctx.gcls(!_ctx.state.autoWidth && "size-" + _ctx.state.size + "-width"), _ctx.state.itemChecked ? "border-color-brand" : "", _ctx.state.disabled ? "bg-color-bg-2" : "", _ctx.state.customClass)),
      onClick: _cache[3] || (_cache[3] = function($event) {
        return _ctx.$emit("click", $event);
      })
    },
    [createBaseVNode(
      "div",
      {
        "data-tag": "tiny-card-body",
        class: normalizeClass([_ctx.state.type === "text" ? "flex" : "block"])
      },
      [_ctx.state.checkType === "checkbox" && _ctx.state.type === "text" ? (openBlock(), createElementBlock(
        "div",
        {
          key: 0,
          "data-tag": "tiny-card-checkbox",
          class: normalizeClass(_ctx.gcls("checkbox"))
        },
        [createVNode(_component_tiny_checkbox, {
          modelValue: _ctx.state.model,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
            return _ctx.state.model = $event;
          }),
          label: _ctx.label,
          disabled: _ctx.state.disabled,
          onChange: _ctx.handleChange
        }, null, 8, ["modelValue", "label", "disabled", "onChange"])],
        2
        /* CLASS */
      )) : createCommentVNode("v-if", true), _ctx.state.checkType === "radio" && _ctx.state.type === "text" ? (openBlock(), createElementBlock(
        "div",
        {
          key: 1,
          "data-tag": "tiny-card-radio",
          class: normalizeClass(_ctx.gcls("radio"))
        },
        [createVNode(_component_tiny_radio, {
          modelValue: _ctx.state.model,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
            return _ctx.state.model = $event;
          }),
          label: _ctx.label,
          disabled: _ctx.state.disabled,
          onChange: _ctx.handleChange
        }, {
          default: withCtx(function() {
            return [_hoisted_1$1];
          }),
          _: 1
          /* STABLE */
        }, 8, ["modelValue", "label", "disabled", "onChange"])],
        2
        /* CLASS */
      )) : createCommentVNode("v-if", true), _ctx.state.type === "image" ? (openBlock(), createElementBlock("div", _hoisted_2$1, [createBaseVNode("img", {
        src: _ctx.src,
        class: "w-full aspect-video bg-cover"
      }, null, 8, _hoisted_3)])) : createCommentVNode("v-if", true), _ctx.state.type === "video" ? (openBlock(), createElementBlock("div", _hoisted_4, [createBaseVNode("video", {
        class: "w-full aspect-video",
        src: _ctx.src,
        controls: ""
      }, null, 8, _hoisted_5)])) : createCommentVNode("v-if", true), createBaseVNode(
        "div",
        {
          "data-tag": "tiny-card-logo",
          class: normalizeClass(["flex-1", _ctx.gcls("size-" + _ctx.state.size + "-padding")])
        },
        [_ctx.state.type === "logo" ? (openBlock(), createElementBlock(
          "div",
          {
            key: 0,
            class: normalizeClass(_ctx.gcls("logo"))
          },
          [createBaseVNode("img", {
            src: _ctx.src,
            class: "bg-contain"
          }, null, 8, _hoisted_6)],
          2
          /* CLASS */
        )) : createCommentVNode("v-if", true), _ctx.title || _ctx.slots.title ? (openBlock(), createElementBlock(
          "div",
          {
            key: 1,
            "data-tag": "tiny-card-title",
            class: normalizeClass(["flex items-start", [_ctx.state.type === "logo" && "text-center justify-center mb-1"]])
          },
          [renderSlot(_ctx.$slots, "title-left"), renderSlot(_ctx.$slots, "title", {}, function() {
            return [createBaseVNode(
              "p",
              {
                class: normalizeClass(_ctx.gcls("title"))
              },
              toDisplayString(_ctx.title),
              3
              /* TEXT, CLASS */
            )];
          }), renderSlot(_ctx.$slots, "title-right")],
          2
          /* CLASS */
        )) : createCommentVNode("v-if", true), createBaseVNode(
          "div",
          {
            "data-tag": "tiny-card-main",
            class: normalizeClass(_ctx.m(_ctx.gcls("main"), _ctx.state.type === "logo" ? "text-center pb-2" : "")),
            style: normalizeStyle({
              height: _ctx.state.height
            })
          },
          [renderSlot(_ctx.$slots, "default")],
          6
          /* CLASS, STYLE */
        )],
        2
        /* CLASS */
      )],
      2
      /* CLASS */
    ), _ctx.state.effectOptions.length || _ctx.slots.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.slots.footer ? (openBlock(), createElementBlock(
      "div",
      {
        key: 0,
        class: normalizeClass(_ctx.gcls("footer"))
      },
      [renderSlot(_ctx.$slots, "footer")],
      2
      /* CLASS */
    )) : createCommentVNode("v-if", true), _ctx.state.effectOptions.length ? (openBlock(), createElementBlock(
      "div",
      {
        key: 1,
        class: normalizeClass(_ctx.gcls("options"))
      },
      [(openBlock(true), createElementBlock(
        Fragment,
        null,
        renderList(_ctx.state.effectOptions.slice(0, _ctx.state.sliceNum), function(item, index2) {
          return openBlock(), createElementBlock("div", {
            class: normalizeClass(["cursor-pointer", [item.disabled ? "text-color-text-disabled cursor-not-allowed" : ""]]),
            key: item.text + index2,
            onClick: withModifiers(function($event) {
              return _ctx.handelIconClick(item, index2, $event);
            }, ["stop"])
          }, [(openBlock(), createBlock(resolveDynamicComponent(item.icon), {
            class: normalizeClass(["w-4 h-4", [item.disabled ? "fill-color-icon-disabled" : ""]])
          }, null, 8, ["class"])), item.text ? (openBlock(), createElementBlock(
            "span",
            _hoisted_9,
            toDisplayString(item.text),
            1
            /* TEXT */
          )) : createCommentVNode("v-if", true)], 10, _hoisted_8);
        }),
        128
        /* KEYED_FRAGMENT */
      )), _ctx.state.effectOptions.length === _ctx.state.iconNum ? (openBlock(), createElementBlock(
        "div",
        {
          key: 0,
          class: normalizeClass(["cursor-pointer", [_ctx.state.effectOptions[_ctx.state.sliceNum].disabled ? "text-color-text-disabled cursor-not-allowed" : ""]]),
          onClick: _cache[2] || (_cache[2] = withModifiers(function($event) {
            return _ctx.handelIconClick(_ctx.state.effectOptions[_ctx.state.sliceNum], _ctx.state.sliceNum, $event);
          }, ["stop"]))
        },
        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.effectOptions[_ctx.state.sliceNum].icon), {
          class: normalizeClass(["w-4 h-4", [_ctx.state.effectOptions[_ctx.state.sliceNum].disabled ? "fill-color-icon-disabled" : ""]])
        }, null, 8, ["class"])), _ctx.state.effectOptions[_ctx.state.sliceNum].text ? (openBlock(), createElementBlock(
          "span",
          _hoisted_10,
          toDisplayString(_ctx.state.effectOptions[_ctx.state.sliceNum].text),
          1
          /* TEXT */
        )) : createCommentVNode("v-if", true)],
        2
        /* CLASS */
      )) : createCommentVNode("v-if", true), _ctx.state.effectOptions.length > _ctx.state.iconNum ? (openBlock(), createBlock(_component_tiny_dropdown, {
        key: 1,
        "show-self-icon": ""
      }, {
        dropdown: withCtx(function() {
          return [createVNode(_component_tiny_dropdown_menu, {
            placement: "bottom"
          }, {
            default: withCtx(function() {
              return [(openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(_ctx.state.effectOptions.slice(_ctx.state.sliceNum), function(item, index2) {
                  return openBlock(), createBlock(
                    _component_tiny_dropdown_item,
                    {
                      key: item.text + index2
                    },
                    {
                      default: withCtx(function() {
                        return [createBaseVNode("div", {
                          onClick: withModifiers(function($event) {
                            return _ctx.handelIconClick(item, index2 + _ctx.state.sliceNum, $event);
                          }, ["stop"]),
                          class: normalizeClass(["px-2", item.disabled ? "text-color-text-disabled cursor-not-allowed" : ""])
                        }, [(openBlock(), createBlock(resolveDynamicComponent(item.icon), {
                          class: normalizeClass(["w-4 h-4", [item.disabled ? "fill-color-icon-disabled" : ""]])
                        }, null, 8, ["class"])), item.text ? (openBlock(), createElementBlock(
                          "span",
                          _hoisted_13,
                          toDisplayString(item.text),
                          1
                          /* TEXT */
                        )) : createCommentVNode("v-if", true)], 10, _hoisted_12)];
                      }),
                      _: 2
                      /* DYNAMIC */
                    },
                    1024
                    /* DYNAMIC_SLOTS */
                  );
                }),
                128
                /* KEYED_FRAGMENT */
              ))];
            }),
            _: 1
            /* STABLE */
          })];
        }),
        default: withCtx(function() {
          return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconMore), {
            class: "w-4 h-4"
          })), _ctx.state.effectOptions[0].text ? (openBlock(), createElementBlock(
            "span",
            _hoisted_11,
            toDisplayString(_ctx.t("ui.base.more")),
            1
            /* TEXT */
          )) : createCommentVNode("v-if", true)];
        }),
        _: 1
        /* STABLE */
      })) : createCommentVNode("v-if", true)],
      2
      /* CLASS */
    )) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)],
    2
    /* CLASS */
  );
}
var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };
  return _extends.apply(this, arguments);
}
var template = function template2(mode) {
  var _process$env;
  var tinyMode = typeof process === "object" ? (_process$env = {}) == null ? void 0 : _process$env.TINY_MODE : null;
  if ("pc" === (tinyMode || mode)) {
    return pc;
  }
  if ("mobile-first" === (tinyMode || mode)) {
    return mobileFirst;
  }
  return pc;
};
var $constants = {
  CARD_GROUP: "CardGroup"
};
var cardProps = _extends({}, $props, {
  _constants: {
    type: Object,
    default: function _default() {
      return $constants;
    }
  },
  modelValue: {},
  src: String,
  title: String,
  customClass: String,
  height: String,
  label: {},
  autoWidth: {
    type: Boolean,
    default: false
  },
  options: {
    type: Array,
    default: function _default2() {
      return [];
    }
  },
  iconMore: {
    type: [Object, String],
    default: function _default3() {
      return index$2();
    }
  },
  size: {
    type: String,
    default: "medium"
  },
  status: {
    type: String,
    default: "default"
  },
  checkType: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: "text"
  },
  disabled: {
    type: Boolean,
    default: false
  }
});
var Card = defineComponent({
  name: $prefix + "Card",
  props: cardProps,
  setup: function setup2(props2, context) {
    return $setup({
      props: props2,
      context,
      template
    });
  }
});
var version = "3.16.0";
Card.model = {
  prop: "modelValue",
  event: "update:modelValue"
};
Card.install = function(Vue) {
  Vue.component(Card.name, Card);
};
Card.version = version;
const searchUserHair = (params) => {
  return axios.get("/api/resource/v1/user/hair/search", { params });
};
const createUserHair = (data) => {
  return axios.post("/api/resource/v1/user/hair", data);
};
const updateUserHair = (id, data) => {
  return axios.put(`/api/resource/v1/user/hair/${id}`, data);
};
const deleteUserHair = (id) => {
  return axios.delete(`/api/resource/v1/user/hair/${id}`);
};
const _hoisted_1 = { class: "user-hair-container" };
const _hoisted_2 = { class: "button-group" };
const _sfc_main = /* @__PURE__ */ defineComponent$1({
  __name: "index",
  setup(__props) {
    const { t } = useI18n();
    const loading = ref(false);
    const modalVisible = ref(false);
    const modalTitle = ref("Add User Hair");
    const isEdit = ref(false);
    const tableData = ref([]);
    const defaultFormData = {
      userName: "",
      hairCount: 1e5,
      // Default hair count
      hairColor: "black",
      // Default hair color
      hairType: "straight"
      // Default hair type
    };
    const formData = reactive({ ...defaultFormData });
    const searchForm = reactive({
      hairColor: "",
      hairType: "",
      minHairCount: null
    });
    const pagination = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    });
    const rules = {
      userName: [{ required: true, message: t("userHair.form.userName.required") }],
      hairCount: [{ required: true, message: t("userHair.form.hairCount.required") }],
      hairColor: [{ required: true, message: t("userHair.form.hairColor.required") }],
      hairType: [{ required: true, message: t("userHair.form.hairType.required") }]
    };
    const fetchData = async () => {
      handleSearch();
    };
    const handleSearch = async () => {
      loading.value = true;
      try {
        const response = await searchUserHair(searchForm);
        tableData.value = response;
      } catch (error) {
        TINYModal.message({
          message: t("baseForm.form.search.error"),
          status: "error"
        });
      } finally {
        loading.value = false;
      }
    };
    const resetSearch = () => {
      Object.assign(searchForm, {
        hairColor: "",
        hairType: "",
        minHairCount: null
      });
      fetchData();
    };
    const openAddModal = () => {
      isEdit.value = false;
      modalTitle.value = "Add User Hair";
      Object.assign(formData, defaultFormData);
      modalVisible.value = true;
    };
    const openEditModal = (record) => {
      isEdit.value = true;
      modalTitle.value = "Edit User Hair";
      Object.assign(formData, record);
      modalVisible.value = true;
    };
    const handleModalOk = async () => {
      loading.value = true;
      try {
        if (isEdit.value && formData.id) {
          await updateUserHair(formData.id, formData);
          TINYModal.message({
            message: t("baseForm.form.update.success"),
            status: "success"
          });
        } else {
          await createUserHair(formData);
          TINYModal.message({
            message: t("baseForm.form.submit.success"),
            status: "success"
          });
        }
        modalVisible.value = false;
        fetchData();
      } catch (error) {
        TINYModal.message({
          message: isEdit.value ? t("baseForm.form.update.error") : t("baseForm.form.submit.error"),
          status: "error"
        });
      } finally {
        loading.value = false;
      }
    };
    const handleModalCancel = () => {
      modalVisible.value = false;
    };
    const handleDelete = async (record) => {
      if (!record.id)
        return;
      loading.value = true;
      try {
        await deleteUserHair(record.id);
        TINYModal.message({
          message: t("baseForm.form.delete.success"),
          status: "success"
        });
        fetchData();
      } catch (error) {
        TINYModal.message({
          message: t("baseForm.form.delete.error"),
          status: "error"
        });
      } finally {
        loading.value = false;
      }
    };
    const onPageChange = (current) => {
      pagination.current = current;
      fetchData();
    };
    onMounted(() => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(unref(Card), {
          class: "general-card w-full",
          title: "User Hair Management"
        }, {
          default: withCtx(() => [
            createVNode(unref(Form), {
              model: searchForm,
              layout: "inline"
            }, {
              default: withCtx(() => [
                createVNode(unref(Row), {
                  flex: true,
                  justify: "left"
                }, {
                  default: withCtx(() => [
                    createVNode(unref(Col), {
                      span: 5,
                      "label-width": "100px"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(FormItem), {
                          field: "hairColor",
                          label: "Hair Color"
                        }, {
                          default: withCtx(() => [
                            createVNode(unref(Input), {
                              modelValue: searchForm.hairColor,
                              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchForm.hairColor = $event),
                              placeholder: "Enter hair color"
                            }, null, 8, ["modelValue"])
                          ]),
                          _: 1
                        })
                      ]),
                      _: 1
                    }),
                    createVNode(unref(Col), {
                      span: 5,
                      "label-width": "100px"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(FormItem), {
                          field: "hairType",
                          label: "Hair Type"
                        }, {
                          default: withCtx(() => [
                            createVNode(unref(Input), {
                              modelValue: searchForm.hairType,
                              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchForm.hairType = $event),
                              placeholder: "Enter hair type"
                            }, null, 8, ["modelValue"])
                          ]),
                          _: 1
                        })
                      ]),
                      _: 1
                    }),
                    createVNode(unref(Col), {
                      span: 5,
                      "label-width": "100px"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(FormItem), {
                          field: "minHairCount",
                          label: "Min Hair Count"
                        }, {
                          default: withCtx(() => [
                            createVNode(unref(Input), {
                              type: "number",
                              modelValue: searchForm.minHairCount,
                              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => searchForm.minHairCount = $event),
                              placeholder: "Enter min hair count"
                            }, null, 8, ["modelValue"])
                          ]),
                          _: 1
                        })
                      ]),
                      _: 1
                    })
                  ]),
                  _: 1
                }),
                createVNode(unref(FormItem), null, {
                  default: withCtx(() => [
                    createBaseVNode("div", _hoisted_2, [
                      createVNode(unref(Button), {
                        type: "primary",
                        onClick: handleSearch
                      }, {
                        default: withCtx(() => [
                          createTextVNode(" Search ")
                        ]),
                        _: 1
                      }),
                      createVNode(unref(Button), { onClick: resetSearch }, {
                        default: withCtx(() => [
                          createTextVNode(" Reset ")
                        ]),
                        _: 1
                      }),
                      createVNode(unref(Button), {
                        type: "primary",
                        onClick: openAddModal
                      }, {
                        default: withCtx(() => [
                          createTextVNode(" Add User Hair ")
                        ]),
                        _: 1
                      })
                    ])
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }, 8, ["model"]),
            createVNode(unref(Grid), {
              data: tableData.value,
              loading: loading.value,
              pagination,
              onPageChange
            }, {
              default: withCtx(() => [
                createVNode(unref(Column), {
                  title: "ID",
                  field: "id"
                }),
                createVNode(unref(Column), {
                  title: "User Name",
                  field: "userName"
                }),
                createVNode(unref(Column), {
                  title: "Hair Count",
                  field: "hairCount"
                }),
                createVNode(unref(Column), {
                  title: "Hair Color",
                  field: "hairColor"
                }),
                createVNode(unref(Column), {
                  title: "Hair Type",
                  field: "hairType"
                }),
                createVNode(unref(Column), { title: "Operations" }, {
                  default: withCtx(({ row }) => [
                    createVNode(unref(Button), {
                      type: "text",
                      onClick: ($event) => openEditModal(row)
                    }, {
                      default: withCtx(() => [
                        createTextVNode(" Edit ")
                      ]),
                      _: 2
                    }, 1032, ["onClick"]),
                    createVNode(unref(Popconfirm), {
                      title: "Tips",
                      message: "Are you sure you want to delete?",
                      onConfirm: ($event) => handleDelete(row),
                      trigger: "click"
                    }, {
                      reference: withCtx(() => [
                        createVNode(unref(Button), {
                          type: "text",
                          status: "danger"
                        }, {
                          default: withCtx(() => [
                            createTextVNode(" Delete ")
                          ]),
                          _: 1
                        })
                      ]),
                      _: 2
                    }, 1032, ["onConfirm"])
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }, 8, ["data", "loading", "pagination"]),
            createVNode(unref(DialogBox), {
              visible: modalVisible.value,
              "onUpdate:visible": _cache[7] || (_cache[7] = ($event) => modalVisible.value = $event),
              title: modalTitle.value
            }, {
              footer: withCtx(() => [
                createVNode(unref(Button), {
                  type: "primary",
                  onClick: handleModalOk
                }, {
                  default: withCtx(() => [
                    createTextVNode("Save")
                  ]),
                  _: 1
                }),
                createVNode(unref(Button), { onClick: handleModalCancel }, {
                  default: withCtx(() => [
                    createTextVNode("Cancel")
                  ]),
                  _: 1
                })
              ]),
              default: withCtx(() => [
                createVNode(unref(Form), {
                  ref: "formRef",
                  model: formData,
                  rules,
                  "label-align": "right"
                }, {
                  default: withCtx(() => [
                    createVNode(unref(FormItem), {
                      field: "userName",
                      label: "User Name"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(Input), {
                          modelValue: formData.userName,
                          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => formData.userName = $event),
                          placeholder: "Enter user name"
                        }, null, 8, ["modelValue"])
                      ]),
                      _: 1
                    }),
                    createVNode(unref(FormItem), {
                      field: "hairCount",
                      label: "Hair Count"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(Input), {
                          type: "number",
                          modelValue: formData.hairCount,
                          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => formData.hairCount = $event),
                          placeholder: "Enter hair count",
                          min: 0
                        }, null, 8, ["modelValue"])
                      ]),
                      _: 1
                    }),
                    createVNode(unref(FormItem), {
                      field: "hairColor",
                      label: "Hair Color"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(Select), {
                          modelValue: formData.hairColor,
                          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => formData.hairColor = $event),
                          placeholder: "Select hair color"
                        }, {
                          default: withCtx(() => [
                            createVNode(unref(Option), { value: "black" }, {
                              default: withCtx(() => [
                                createTextVNode("Black")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "brown" }, {
                              default: withCtx(() => [
                                createTextVNode("Brown")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "blonde" }, {
                              default: withCtx(() => [
                                createTextVNode("Blonde")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "red" }, {
                              default: withCtx(() => [
                                createTextVNode("Red")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "grey" }, {
                              default: withCtx(() => [
                                createTextVNode("Grey")
                              ]),
                              _: 1
                            })
                          ]),
                          _: 1
                        }, 8, ["modelValue"])
                      ]),
                      _: 1
                    }),
                    createVNode(unref(FormItem), {
                      field: "hairType",
                      label: "Hair Type"
                    }, {
                      default: withCtx(() => [
                        createVNode(unref(Select), {
                          modelValue: formData.hairType,
                          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => formData.hairType = $event),
                          placeholder: "Select hair type"
                        }, {
                          default: withCtx(() => [
                            createVNode(unref(Option), { value: "straight" }, {
                              default: withCtx(() => [
                                createTextVNode("Straight")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "wavy" }, {
                              default: withCtx(() => [
                                createTextVNode("Wavy")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "curly" }, {
                              default: withCtx(() => [
                                createTextVNode("Curly")
                              ]),
                              _: 1
                            }),
                            createVNode(unref(Option), { value: "coily" }, {
                              default: withCtx(() => [
                                createTextVNode("Coily")
                              ]),
                              _: 1
                            })
                          ]),
                          _: 1
                        }, 8, ["modelValue"])
                      ]),
                      _: 1
                    })
                  ]),
                  _: 1
                }, 8, ["model"])
              ]),
              _: 1
            }, 8, ["visible", "title"])
          ]),
          _: 1
        })
      ]);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_85ee0d42_lang = "";
const index = /* @__PURE__ */ _export_sfc$2(_sfc_main, [["__scopeId", "data-v-85ee0d42"]]);
export {
  index as default
};
